<template>
    <view class="container">
        <!-- 购物车头部 -->
        <view class="tui-edit-goods">
            <view>购物车共<text class="tui-goods-num">{{ dataList.length }}</text>件商品</view>
            <tui-button type="gray" :plain="true" shape="circle" width="160rpx" height="60rpx" :size="24"
                @click="editGoods">{{ isEdit ? "完成" : "编辑商品" }}</tui-button>
        </view>

        <!-- 购物车商品列表 -->
        <checkbox-group @change="buyChange">
            <view class="tui-cart-cell tui-mtop" v-for="(item, index) in dataList" :key="item.id">
                <tui-swipe-action :actions="actions" @click="handlerButton" :params="item">
                    <template v-slot:content>
                        <view class="tui-goods-item">
                            <label class="tui-checkbox">
                                <checkbox :value="item.id.toString()" :checked="item.selected" color="#e41f19">
                                </checkbox>
                            </label>
                            <!-- 商品图片 -->
                            <image :src="item.spu && item.spu.picUrl ? item.spu.picUrl : ''" class="tui-goods-img"></image>
                            <!-- 商品信息 -->
                            <view class="tui-goods-info">
                                <view class="tui-goods-title">{{ item.spu && item.spu.name ? item.spu.name : '商品名称' }}</view>
                                <view class="tui-goods-model" @click="showSpecSelector(item, index)">
                                    <view class="tui-model-text">
                                        规格:
                                        {{ item.sku && item.sku.properties ? item.sku.properties.map(p => `${p.propertyName}:${p.valueName}`).join(' ') : '暂无规格' }}
                                    </view>
                                    <tui-icon name="arrow-right" :size="14" color="#999" style="margin-left: 8rpx;"></tui-icon>
                                </view>
                                <!-- 商品价格和数量 -->
                                <view class="tui-price-box">
                                    <view class="tui-goods-price">￥{{ getPrice(item.sku && item.sku.price ? item.sku.price : 0) }}</view>
                                    <tui-numberbox :value="item.count" :height="36" :width="64" :min="-1" :index="index"
                                        @change="changeNum"></tui-numberbox>
                                </view>
                            </view>
                        </view>
                    </template>
                </tui-swipe-action>
            </view>
        </checkbox-group>



        <!--猜你喜欢-->

        <!-- <tui-divider :size="28" :bold="true" color="#333" width="50%">
            <tui-icon name="like" :size="18" color="#e41f19"></tui-icon>
            <text class="tui-youlike">猜你喜欢</text>
        </tui-divider>
        <view class="tui-product-list">
            <view class="tui-product-container">
                <template v-for="(item,index) in productList">
                    <view :key="index" v-if="(index+1)%2!=0" class="tui-pro-item" hover-class="hover"
                        :hover-start-time="150" @tap="detail">
                        <image :src="'/static/images/mall/product/'+item.img+'.jpg'" class="tui-pro-img"
                            mode="widthFix"></image>
                        <view class="tui-pro-content">
                            <view class="tui-pro-tit">{{item.name}}</view>
                            <view>
                                <view class="tui-pro-price">
                                    <text class="tui-sale-price">￥{{item.sale}}</text>
                                    <text class="tui-factory-price">￥{{item.factory}}</text>
                                </view>
                                <view class="tui-pro-pay">{{item.payNum}}人付款</view>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
            <view class="tui-product-container">
                <template v-for="(item,index) in productList">
                    <view :key="index" v-if="(index+1)%2==0" class="tui-pro-item" hover-class="hover"
                        :hover-start-time="150" @tap="detail">
                        <image :src="'/static/images/mall/product/'+item.img+'.jpg'" class="tui-pro-img"
                            mode="widthFix" />
                        <view class="tui-pro-content">
                            <view class="tui-pro-tit">{{item.name}}</view>
                            <view>
                                <view class="tui-pro-price">
                                    <text class="tui-sale-price">￥{{item.sale}}</text>
                                    <text class="tui-factory-price">￥{{item.factory}}</text>
                                </view>
                                <view class="tui-pro-pay">{{item.payNum}}人付款</view>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
        </view> -->

        <!--tabbar-->
        <!-- 合计和结算 -->
        <view class="tui-tabbar">
            <view class="tui-checkAll">
                <checkbox-group @change="checkAll">
                    <label class="tui-checkbox" :class="{'tui-checked': isAll}">
                        <checkbox :checked="isAll" color="#e41f19"></checkbox>
                        <text class="tui-checkbox-pl">全选</text>
                    </label>
                </checkbox-group>
                <view class="tui-total-price" v-if="!isEdit">
                    合计:<text class="tui-bold">￥{{ getPrice(totalPrice) }}</text>
                </view>
                <view class="tui-cart-count" v-if="cartCount > 0">
                    购物车共<text class="tui-count-num">{{ cartCount }}</text>件商品
                </view>
            </view>
            <tui-button width="200rpx" height="70rpx" :size="30" type="danger" shape="circle" @click="btnPay">
                {{ isEdit ? "删除" : `去结算(${buyNum})` }}
            </tui-button>
        </view>
        <!--加载loadding-->
        <tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
        
        <!-- 规格选择弹窗 -->
        <tui-bottom-popup :zIndex="99999" :show="specPopupShow" @close="hideSpecPopup">
            <view class="tui-popup-box">
                <view class="tui-product-box tui-padding">
                    <image :src="(currentSelectedSku && currentSelectedSku.picUrl) || (currentProDetail && currentProDetail.picUrl) || ''" class="tui-popup-img"></image>
                    <view class="tui-popup-price">
                        <view class="tui-popup-price-main">
                            <view class="tui-amount tui-bold">￥{{ getPrice((currentSelectedSku && currentSelectedSku.price) || (currentProDetail && currentProDetail.price) || 0) }}</view>
                            <view class="tui-original-amount" v-if="(currentSelectedSku && currentSelectedSku.marketPrice) || (currentProDetail && currentProDetail.marketPrice)">
                                ￥{{ getPrice((currentSelectedSku && currentSelectedSku.marketPrice) || (currentProDetail && currentProDetail.marketPrice) || 0) }}
                            </view>
                        </view>
                        <view class="tui-number">编号:{{ (currentSelectedSku && currentSelectedSku.id) || (currentProDetail && currentProDetail.id) || '' }}</view>
                        <view class="tui-stock">库存: {{ (currentSelectedSku && currentSelectedSku.stock) || (currentProDetail && currentProDetail.stock) || 0 }}</view>
                    </view>
                </view>
                <scroll-view scroll-y class="tui-popup-scroll">
                    <view class="tui-scrollview-box">
                        <!-- 动态生成规格属性 -->
                        <view v-for="(spec, index) in currentSpecs" :key="index">
                            <view class="tui-bold tui-attr-title">{{ spec.propertyName }}</view>
                            <view class="tui-attr-box">
                                <view v-for="value in spec.values" :key="value.valueId" class="tui-attr-item"
                                    :class="{ 'tui-attr-active': isSpecSelected(spec.propertyId, value.valueId) }"
                                    @click="selectSpec(spec.propertyId, value.valueId)">
                                    {{ value.valueName }}
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
                    <view class="tui-flex-1">
                        <tui-button height="72rpx" :size="28" type="danger" shape="circle"
                            @click="confirmChangeSpec">
                            确定
                        </tui-button>
                    </view>
                </view>
                <view class="tui-right">
                    <tui-icon name="close-fill" color="#999" :size="20" @click="hideSpecPopup"></tui-icon>
                </view>
            </view>
        </tui-bottom-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataList: [],
                isAll: false,
                totalPrice: 0,
                buyNum: 0,
                cartCount: 0, // 购物车商品总数量
                cartIds: [], //购物车id
                actions: [{
                    name: '收藏',
                    width: 64,
                    color: '#fff',
                    fontsize: 28,
                    background: '#FFC600'
                },
                {
                    name: '看相似',
                    color: '#fff',
                    fontsize: 28,
                    width: 64,
                    background: '#FF7035'
                },
                {
                    name: '删除',
                    color: '#fff',
                    fontsize: 28,
                    width: 64,
                    background: '#F82400'
                }
                ],
                actions2: [{
                    name: '看相似',
                    color: '#fff',
                    fontsize: 28,
                    width: 64,
                    background: '#FF7035'
                },
                {
                    name: '删除',
                    color: '#fff',
                    fontsize: 28,
                    width: 64,
                    background: '#F82400'
                }
                ],
                isEdit: false,
                productList: [
                    {
                        img: 4,
                        name: "百雀羚套装女补水保湿护肤品",
                        sale: 1599,
                        factory: 2899,
                        payNum: 236
                    }
                ],
                pageIndex: 1,
                loadding: false,
                pullUpOn: true,
                // 规格选择相关
                specPopupShow: false,
                currentCartItem: null,
                currentCartIndex: -1,
                currentProDetail: null,
                currentSkus: [],
                currentSpecs: [],
                currentSelectedSpec: {},
                currentSelectedSku: null,
                currentSelectedSkuId: null
            }
        },
        mounted() {
            this.loadShopCartList()
            // 监听支付成功后的购物车刷新事件
            uni.$on('refreshCart', this.loadShopCartList);
        },
        beforeDestroy() {
            // 移除事件监听
            uni.$off('refreshCart', this.loadShopCartList);
        },
        methods: {
            // 滑动操作按钮
            handlerButton(e) {
                const { index,item } = e;
                if (e.name === "删除") {
                    this.dataList = this.dataList.filter(data => data.id !== item.id);
                    this.calcHandle();
                    // 触发购物车数量更新事件
                    uni.$emit('refreshCart');
                }
            },
            // 加载购物车列表
            loadShopCartList() {
                this.$api.req("/trade/cart/list",{},"get","JSON",false).then((res) => {
                    if (res.code === 0) {
                        this.dataList = res.data.validList.map(item => ({
                            id: item.id,
                            count: item.count,
                            selected: item.selected,
                            spu: item.spu,
                            sku: item.sku
                        }));
                        // 计算购物车有效商品总数量
                        this.cartCount = (res.data.validList || []).reduce((sum, item) => sum + item.count, 0);
                        this.calcHandle();
                    }
                });
            },
            // 获取格式化价格（分转元）
            getPrice(price) {
                return ((Number(price) || 0) / 100).toFixed(2);
            },
            // 计算总价和数量
            calcHandle() {
                let totalPrice = 0,buyNum = 0;
                this.dataList.forEach(item => {
                    if (item.selected && item.sku && item.sku.price) {
                        totalPrice += item.sku.price * item.count;
                        buyNum += item.count;
                    }
                });
                this.totalPrice = totalPrice;
                this.buyNum = buyNum;
                this.isAll = this.dataList.every(item => item.selected);
            },
            // 修改数量
            changeNum(e) {
                const updatedCount = e.value; // 获取修改后的数量
                const currentItem = this.dataList[e.index]; // 当前商品
                currentItem.count = updatedCount;

                if (updatedCount === 0) {
                    // 数量为 0，自动删除该商品
                    this.$api.req(
                        `/trade/cart/delete?ids=${currentItem.id}`,
                        { ids: currentItem.id }, // 删除商品所需的 id
                        "DELETE",
                        "JSON",
                        false
                    ).then((res) => {
                        if (res.code === 0) {
                            uni.showToast({ title: "商品已删除",icon: "none" });
                            // 从 dataList 中移除该商品
                            this.dataList.splice(e.index,1);
                            this.calcHandle(); // 重新计算总价和数量
                            // 触发购物车数量更新事件
                            uni.$emit('refreshCart');
                        } else {
                            uni.showToast({ title: "删除失败，请重试",icon: "none" });
                        }
                    });
                } else {
                    // 数量非 0，更新数量接口
                    this.$api.req(
                        "/trade/cart/update-count",
                        {
                            count: updatedCount,
                            id: currentItem.id
                        },
                        "PUT",
                        "JSON",
                        false
                    ).then((res) => {
                        if (res.code === 0) {
                            this.calcHandle(); // 重新计算总价和数量
                            // 触发购物车数量更新事件
                            uni.$emit('refreshCart');
                        }
                    });
                }
            },

            // 商品选中状态变化
            buyChange(e) {
                const selectedIds = e.detail.value.map(Number);
                this.dataList.forEach(item => {
                    item.selected = selectedIds.includes(item.id);
                });
                this.calcHandle();
            },
            // 全选按钮
            checkAll() {
                this.isAll = !this.isAll;
                this.dataList.forEach(item => item.selected = this.isAll);
                this.calcHandle();
            },
            // 切换编辑状态
            editGoods() {
                this.isEdit = !this.isEdit;
            },
            // 显示规格选择器
            showSpecSelector(item, index) {
                this.currentCartItem = item;
                this.currentCartIndex = index;
                // 加载商品详情和规格信息
                this.loadProductSpecs(item.spu.id, item.sku);
            },
            // 加载商品规格信息
            loadProductSpecs(spuId, currentSku) {
                this.$api.req(
                    `/product/spu/get-detail`,
                    { id: spuId },
                    "get",
                    "JSON",
                    false
                ).then((res) => {
                    if (res.code === 0) {
                        const data = res.data;
                        this.currentProDetail = {
                            id: data.id,
                            name: data.name,
                            picUrl: data.picUrl,
                            price: data.price,
                            marketPrice: data.marketPrice,
                            stock: data.stock
                        };
                        this.currentSkus = data.skus || [];
                        this.initSpecs();
                        // 初始化当前选中的规格
                        if (currentSku && currentSku.properties) {
                            const selectedSpec = {};
                            currentSku.properties.forEach(prop => {
                                selectedSpec[prop.propertyId] = prop.valueId;
                            });
                            this.currentSelectedSpec = selectedSpec;
                            this.updateSelectedSku();
                        } else {
                            this.currentSelectedSpec = {};
                            this.currentSelectedSku = null;
                        }
                        this.specPopupShow = true;
                    } else {
                        uni.showToast({
                            title: res.msg || '加载商品信息失败',
                            icon: 'none'
                        });
                    }
                }).catch((error) => {
                    console.error('加载商品信息失败:', error);
                    uni.showToast({
                        title: '网络异常，请稍后重试',
                        icon: 'none'
                    });
                });
            },
            // 初始化规格属性
            initSpecs() {
                const specMap = {};
                this.currentSkus.forEach((sku) => {
                    if (sku.properties) {
                        sku.properties.forEach((prop) => {
                            if (!specMap[prop.propertyId]) {
                                specMap[prop.propertyId] = {
                                    propertyId: prop.propertyId,
                                    propertyName: prop.propertyName,
                                    values: [],
                                };
                            }
                            if (
                                !specMap[prop.propertyId].values.some(
                                    (v) => v.valueId === prop.valueId
                                )
                            ) {
                                specMap[prop.propertyId].values.push({
                                    valueId: prop.valueId,
                                    valueName: prop.valueName,
                                });
                            }
                        });
                    }
                });
                this.currentSpecs = Object.values(specMap);
            },
            // 判断规格是否选中
            isSpecSelected(propertyId, valueId) {
                return this.currentSelectedSpec[propertyId] === valueId;
            },
            // 选择规格
            selectSpec(propertyId, valueId) {
                this.$set(this.currentSelectedSpec, propertyId, valueId);
                this.updateSelectedSku();
            },
            // 更新选中的SKU
            updateSelectedSku() {
                const selectedProperties = Object.entries(this.currentSelectedSpec).map(
                    ([propertyId, valueId]) => ({
                        propertyId: Number(propertyId),
                        valueId: Number(valueId)
                    })
                );

                // 查找匹配的 SKU
                const matchedSku = this.currentSkus.find((sku) => {
                    if (!sku.properties || sku.properties.length === 0) return false;
                    return selectedProperties.every((selectedProp) =>
                        sku.properties.some(
                            (skuProp) =>
                                skuProp.propertyId === selectedProp.propertyId &&
                                skuProp.valueId === selectedProp.valueId
                        )
                    );
                });

                if (matchedSku) {
                    this.currentSelectedSku = matchedSku;
                    this.currentSelectedSkuId = matchedSku.id;
                } else {
                    this.currentSelectedSku = null;
                    this.currentSelectedSkuId = null;
                }
            },
            // 确认修改规格
            confirmChangeSpec() {
                if (!this.currentSelectedSku || !this.currentSelectedSkuId) {
                    uni.showToast({
                        title: '请选择完整规格',
                        icon: 'none'
                    });
                    return;
                }
                
                if (this.currentSelectedSkuId === this.currentCartItem.sku.id) {
                    uni.showToast({
                        title: '规格未改变',
                        icon: 'none'
                    });
                    this.hideSpecPopup();
                    return;
                }

                // 更新购物车中的SKU
                // 先删除旧的购物车项，然后添加新的
                const oldCartId = this.currentCartItem.id;
                const newCount = this.currentCartItem.count;

                // 删除旧的购物车项
                this.$api.req(
                    `/trade/cart/delete?ids=${oldCartId}`,
                    {},
                    "DELETE",
                    "JSON",
                    false
                ).then((res) => {
                    if (res.code === 0) {
                        // 添加新的购物车项
                        return this.$api.req(
                            "/trade/cart/add",
                            {
                                skuId: this.currentSelectedSkuId,
                                count: newCount
                            },
                            "POST",
                            "JSON",
                            false
                        );
                    } else {
                        throw new Error(res.msg || '删除失败');
                    }
                }).then((res) => {
                    if (res.code === 0) {
                        uni.showToast({
                            title: '规格修改成功',
                            icon: 'success'
                        });
                        this.hideSpecPopup();
                        // 重新加载购物车列表
                        this.loadShopCartList();
                        uni.$emit('refreshCart');
                    } else {
                        throw new Error(res.msg || '添加失败');
                    }
                }).catch((error) => {
                    console.error('修改规格失败:', error);
                    uni.showToast({
                        title: error.message || '修改规格失败，请重试',
                        icon: 'none'
                    });
                });
            },
            // 隐藏规格选择弹窗
            hideSpecPopup() {
                this.specPopupShow = false;
                this.currentCartItem = null;
                this.currentCartIndex = -1;
                this.currentProDetail = null;
                this.currentSkus = [];
                this.currentSpecs = [];
                this.currentSelectedSpec = {};
                this.currentSelectedSku = null;
                this.currentSelectedSkuId = null;
            },
            btnPay() {
                if (this.isEdit) {
                    const selectedIds = this.dataList
                        .filter(item => item.selected)
                        .map(item => item.id);

                    if (selectedIds.length === 0) {
                        uni.showToast({ title: "请选择要删除的商品",icon: "none" });
                        return;
                    }

                    uni.showModal({
                        title: "确认删除",
                        content: "确定要删除选中的商品吗？",
                        success: (res) => {
                            if (res.confirm) {
                                this.$api.req(
                                    `/trade/cart/delete?ids=${selectedIds.join(',')}`,
                                    {},
                                    "DELETE",
                                    "JSON",
                                    false
                    ).then((res) => {
                        if (res.code === 0) {
                            uni.showToast({ title: "删除成功",icon: "success" });
                            this.dataList = this.dataList.filter(item => !item.selected);
                            this.calcHandle();
                            // 触发购物车数量更新事件
                            uni.$emit('refreshCart');
                        } else {
                            uni.showToast({ title: "删除失败，请重试",icon: "none" });
                        }
                    });
                            }
                        }
                    });
                } else {
                    // 只处理选中的商品
                    var items = []
                    this.dataList.forEach(item => {
                        if (item.selected) {
                            items.push({
                                skuId: item.sku.id,
                                count: item.count,
                                cartId: item.id // 传递购物车ID，用于订单创建成功后删除购物车商品
                            })
                        }
                    })
                    if (items.length > 0) {
                        this.f.nav(`/subPackage2/submitOrder/submitOrder?items=${JSON.stringify(items)}`)
                    } else {
                        uni.showToast({
                            title: "请选择要结算的商品",
                            icon: "none"
                        });
                    }
                }
            },


            checkAll(e) {
                this.isAll = !this.isAll;
                let buyNum = 0;
                let totalPrice = 0;
                this.dataList.map((item) => {
                    item.selected = this.isAll;
                    if (this.isAll) {
                        buyNum += item.buyNum;
                        totalPrice += item.price * item.buyNum;
                    }
                })
                this.totalPrice = totalPrice;
                this.buyNum = buyNum;
            }
        },
        onShow() {
            // 页面显示时刷新购物车列表（从支付成功页面返回时会自动刷新）
            this.loadShopCartList();
        },
        onPullDownRefresh() {
            setTimeout(() => {
                uni.stopPullDownRefresh()
            },200)
        },
        onPullDownRefresh: function () {
            let loadData = JSON.parse(JSON.stringify(this.productList));
            loadData = loadData.splice(0,10)
            this.productList = loadData;
            this.pageIndex = 1;
            this.pullUpOn = true;
            this.loadding = false
            uni.stopPullDownRefresh()
        },
        onReachBottom: function () {
            if (!this.pullUpOn) return;
            this.loadding = true;
            if (this.pageIndex == 4) {
                this.loadding = false;
                this.pullUpOn = false
            } else {
                let loadData = JSON.parse(JSON.stringify(this.productList));
                loadData = loadData.splice(0,10)
                if (this.pageIndex == 1) {
                    loadData = loadData.reverse();
                }
                this.productList = this.productList.concat(loadData);
                this.pageIndex = this.pageIndex + 1;
                this.loadding = false
            }
        },
        onNavigationBarButtonTap(e) {
            this.isEdit = !this.isEdit;
            let text = this.isEdit ? "完成" : "编辑";
            // #ifdef APP-PLUS
            let webView = this.$mp.page.$getAppWebview();
            webView.setTitleNViewButtonStyle(0,{
                text: text
            });
            // #endif
        }
    }
</script>

<style>
    .container {
        padding-bottom: 120rpx;
    }

    .tui-mtop {
        margin-top: 24rpx;
    }

    .tui-edit-goods {
        width: 100%;
        border-radius: 12rpx;
        overflow: hidden;
        padding: 24rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
        font-size: 24rpx;
    }

    .tui-goods-num {
        font-weight: bold;
        color: #e41f19;
    }

    .tui-cart-cell {
        width: 100%;
        border-radius: 12rpx;
        background: #FFFFFF;
        padding: 40rpx 0;
        overflow: hidden;
    }

    .tui-goods-item {
        display: flex;
        padding: 0 30rpx;
        box-sizing: border-box;
    }

    .tui-checkbox {
        min-width: 70rpx;
        display: flex;
        align-items: center;
    }

    /* #ifdef MP-WEIXIN */
    .tui-checkbox .wx-checkbox-input {
        width: 44rpx;
        height: 44rpx;
        margin-right: 0 !important;
        border-radius: 50% !important;
        transform: scale(1);
        border: 2rpx solid #d1d1d1 !important;
        background: #fff;
    }

    .tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        background: #e41f19 !important;
        border-color: #e41f19 !important;
        width: 44rpx !important;
        height: 44rpx !important;
    }

    .tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
        content: '✓';
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* #endif */
    /* #ifndef MP-WEIXIN */

    ::v-deep .tui-checkbox .uni-checkbox-input {
        width: 44rpx;
        height: 44rpx;
        margin-right: 0 !important;
        border-radius: 50% !important;
        transform: scale(1);
        border: 2rpx solid #d1d1d1 !important;
        background: #fff;
    }

    ::v-deep .tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
        background: #e41f19 !important;
        border-color: #e41f19 !important;
        width: 44rpx !important;
        height: 44rpx !important;
    }

    ::v-deep .tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
        content: '✓';
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* #endif */

    /* #ifdef MP-ALIPAY */
    ::v-deep checkbox {
        width: 44rpx;
        height: 44rpx;
        margin-right: 0 !important;
        border-radius: 50% !important;
        transform: scale(1);
        border: 2rpx solid #d1d1d1 !important;
        background: #fff;
        position: relative;
    }

    ::v-deep checkbox-checked {
        background: #e41f19 !important;
        border-color: #e41f19 !important;
        width: 44rpx !important;
        height: 44rpx !important;
    }

    ::v-deep checkbox-checked::before {
        content: '✓';
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* #endif */
    .tui-goods-img {
        width: 220rpx;
        height: 220rpx !important;
        border-radius: 12rpx;
        flex-shrink: 0;
        display: block;
    }

    .tui-goods-info {
        width: 100%;
        padding-left: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        box-sizing: border-box;
        overflow: hidden;
    }

    .tui-goods-title {
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 24rpx;
        color: #333;
    }

    .tui-goods-model {
        max-width: 100%;
        color: #333;
        background: #F5F5F5;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16rpx;
        box-sizing: border-box;
    }

    .tui-model-text {
        max-width: 100%;
        transform: scale(0.9);
        transform-origin: 0 center;
        font-size: 24rpx;
        line-height: 32rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tui-price-box {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .tui-goods-price {
        font-size: 34rpx;
        font-weight: 500;
        color: #e41f19;
    }

    .tui-scale {
        transform: scale(0.8);
        transform-origin: 100% 100%;
    }

    .tui-activity {
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx 20rpx 100rpx;
        box-sizing: border-box;
    }

    .tui-buy {
        display: flex;
        align-items: center
    }

    .tui-bold {
        font-weight: bold;
    }

    .tui-sub-info {
        max-width: 532rpx;
        font-size: 24rpx;
        line-height: 24rpx;
        padding: 20rpx 30rpx 10rpx 30rpx;
        box-sizing: border-box;
        color: #333;
        transform: scale(0.8);
        transform-origin: 100% center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: auto
    }

    .tui-invalid-text {
        width: 66rpx;
        margin-right: 4rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;
        background: rgba(0, 0, 0, .3);
        transform: scale(0.8);
        transform-origin: center center;
        border-radius: 4rpx;
        flex-shrink: 0;
    }

    .tui-gray {
        color: #B2B2B2 !important;
    }

    .tui-goods-invalid {
        color: #555;
        font-size: 24rpx;
    }

    .tui-flex-center {
        align-items: center !important;
    }

    .tui-invalid-ptop {
        padding-top: 40rpx;
    }

    .tui-tabbar {
        width: 100%;
        height: 100rpx;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        z-index: 99999;
    }

    .tui-tabbar::before {
        content: '';
        width: 100%;
        border-top: 1rpx solid #d9d9d9;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }

    .tui-checkAll {
        display: flex;
        align-items: center;
    }

    .tui-checkbox-pl {
        padding-left: 12rpx;
    }

    /* 全选按钮样式优化 */
    .tui-checkAll .tui-checkbox {
        min-width: 80rpx;
    }

    /* #ifdef MP-WEIXIN */
    .tui-checkAll .tui-checkbox .wx-checkbox-input {
        width: 44rpx;
        height: 44rpx;
        margin-right: 0 !important;
        border-radius: 50% !important;
        transform: scale(1);
        border: 2rpx solid #d1d1d1 !important;
        background: #fff;
    }

    .tui-checkAll .tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        background: #e41f19 !important;
        border-color: #e41f19 !important;
        width: 44rpx !important;
        height: 44rpx !important;
    }

    .tui-checkAll .tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
        content: '✓';
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* #endif */
    /* #ifndef MP-WEIXIN */

    ::v-deep .tui-checkAll .tui-checkbox .uni-checkbox-input {
        width: 44rpx;
        height: 44rpx;
        margin-right: 0 !important;
        border-radius: 50% !important;
        transform: scale(1);
        border: 2rpx solid #d1d1d1 !important;
        background: #fff;
    }

    ::v-deep .tui-checkAll .tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
        background: #e41f19 !important;
        border-color: #e41f19 !important;
        width: 44rpx !important;
        height: 44rpx !important;
    }

    ::v-deep .tui-checkAll .tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
        content: '✓';
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* #endif */

    .tui-total-price {
        padding-left: 30rpx;
        font-size: 30rpx !important;
    }

    .tui-cart-count {
        padding-left: 20rpx;
        font-size: 24rpx;
        color: #666;
    }

    .tui-count-num {
        font-weight: bold;
        color: #e41f19;
    }

    /*猜你喜欢*/
    .tui-youlike {
        padding-left: 12rpx
    }

    .tui-product-list {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .tui-product-container {
        flex: 1;
        margin-right: 2%;
    }

    .tui-product-container:last-child {
        margin-right: 0;
    }

    .tui-pro-item {
        width: 100%;
        margin-bottom: 4%;
        background: #fff;
        box-sizing: border-box;
        border-radius: 12rpx;
        overflow: hidden;
    }

    .tui-pro-img {
        width: 100%;
        display: block;
    }

    .tui-pro-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20rpx;
    }

    .tui-pro-tit {
        color: #2e2e2e;
        font-size: 26rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tui-pro-price {
        padding-top: 18rpx;
    }

    .tui-sale-price {
        font-size: 34rpx;
        font-weight: 500;
        color: #e41f19;
    }

    .tui-factory-price {
        font-size: 24rpx;
        color: #a0a0a0;
        text-decoration: line-through;
        padding-left: 12rpx;
    }

    .tui-pro-pay {
        padding-top: 10rpx;
        font-size: 24rpx;
        color: #656565;
    }
    
    /* 规格选择弹窗样式 */
    .tui-popup-box {
        background: #fff;
        border-radius: 20rpx 20rpx 0 0;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }
    
    .tui-product-box {
        display: flex;
        padding: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
    }
    
    .tui-popup-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
    }
    
    .tui-popup-price {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .tui-popup-price-main {
        display: flex;
        align-items: baseline;
        gap: 20rpx;
    }
    
    .tui-amount {
        font-size: 36rpx;
        color: #e41f19;
    }
    
    .tui-original-amount {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
    }
    
    .tui-number, .tui-stock {
        font-size: 24rpx;
        color: #666;
        margin-top: 10rpx;
    }
    
    .tui-popup-scroll {
        max-height: 50vh;
        flex: 1;
    }
    
    .tui-scrollview-box {
        padding: 30rpx;
    }
    
    .tui-attr-title {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
        margin-top: 30rpx;
    }
    
    .tui-attr-title:first-child {
        margin-top: 0;
    }
    
    .tui-attr-box {
        display: flex;
        flex-wrap: wrap;
        gap: 20rpx;
    }
    
    .tui-attr-item {
        padding: 12rpx 24rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        font-size: 26rpx;
        color: #333;
        background: #fff;
        transition: all 0.3s;
    }
    
    .tui-attr-item.tui-attr-active {
        border-color: #e41f19;
        background: #fff5f5;
        color: #e41f19;
    }
    
    .tui-popup-btn {
        padding: 30rpx;
        border-top: 1rpx solid #f0f0f0;
    }
    
    .tui-right {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        padding: 10rpx;
    }
</style>